<template>
  <div class="app-container">
    <!-- 操作栏 -->
    <!-- <div class="buttons">
      <el-button type="primary" icon="el-icon-plus" @click="add"
        >新增</el-button
      >
    </div> -->
    <div class="mod-result-table">
      <HTable
        ref="table"
        :tableData="tableData"
        :columnConfigs="columnConfigs"
        @selection-change="handleSelectionChange"
        :selectable="false"
        orderable
        v-loading="loading"
        :pages="pagination"
        @page-change="handlePageChange"
        @size-change="handleSizeChange"
      >
        <template slot-scope="{ row }">
          <template v-if="row.name == 'status'">
            <el-tag v-if="row.row.status == 0" type="success">启用</el-tag>
            <el-tag v-if="row.row.status == 1" type="danger">停用</el-tag>
          </template>

          <template v-else-if="row.name == 'action'">
            <el-button
              v-if="row.row.status == 0"
              type="text"
              size="small"
              @click="interrupt(row.row)"
              >一键中断
            </el-button>
            <el-button
              v-if="row.row.status == 1"
              type="text"
              size="small"
              @click="unblock(row.row)"
              >恢复连接
            </el-button>
          </template>
        </template>
      </HTable>
    </div>
  </div>
</template>

<script>
import table from "@/mixins/commontable";
import { columnConfigs } from "./columnConfigs.js";
import {
  getList,
  oneClickInterrupt,
  oneClickUnblock,
} from "@/api/yybl/session";

export default {
  components: {},
  mixins: [table], //表格的混入，主要包括表格上通用的方法和数据，比如查询，重置，分页这些功能
  props: {},
  data() {
    const validatePhoneNumber = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号"));
      }
      const phoneNumber = new RegExp(
        "^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\\d{8}$"
      );
      if (phoneNumber.test(value)) {
        callback();
      } else {
        callback(new Error("请输入正确的手机号"));
      }
    };
    return {
      columnConfigs,
      dialogVisible1: false,
      vpnform: {},
      rulesVpnform: {
        phone: {
          required: true,
          validator: validatePhoneNumber,
          trigger: "blur",
        },
      },
      computers: [],
      vpntypes: [],
      curRow: {},
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleClose() {
      this.dialogVisible1 = false;
    },
    handleSelectionChange() {},

    refresh() {
      this.getlists(getList, {});
    },

    interrupt(row, status) {
      const msg = "确认一键中断该会话嘛?";
      this.$confirm(msg, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let params = {
          sessionId: row.sessionId,
          userCode: row.userCode,
          terminalIp: row.terminalIp,
          proxyIp: row.proxyIp,
          proxyPort: row.proxyPort,
        };
        oneClickInterrupt(params)
          .then((res) => {
            console.log(res);
            if (res.rescode == "200") {
              this.$message.success(res.msg);
              this.refresh();
            } else this.$message.error(res.msg);
          })
          .catch((err) => {
            console.log(error);
          });
      });
    },

    unblock(row, status) {
      const msg = "确认恢复该会话的连接嘛?";
      this.$confirm(msg, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let params = {
          sessionId: row.sessionId,
          userCode: row.userCode,
          terminalIp: row.terminalIp,
          proxyIp: row.proxyIp,
          proxyPort: row.proxyPort,
        };
        oneClickUnblock(params)
          .then((res) => {
            console.log(res);
            if (res.rescode == "200") {
              this.$message.success(res.msg);
              this.refresh();
            } else this.$message.error(res.msg);
          })
          .catch((err) => {
            console.log(error);
          });
      });
    },
  },
  created() {
    this.refresh();
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__content {
  .el-date-editor.el-input {
    width: 100%;
  }
}
::v-deep .el-button {
  .el-icon-edit + span {
    margin-left: 0px;
  }
  .el-icon-delete + span {
    margin-left: 0px;
  }
}
</style>
